<template>
  <div>
    <div>
     <van-card
      :num="item.stock"
      :price="item.price"
      :desc="item.skuCode"
      :origin-price="item.originalPrice"
      :title="item.sp"
      :thumb="item.pic"
      v-for="item in product.skuList"
      :key="item.id"
    >
      <template #tags>
        <van-tag plain type="danger" v-if="product.defualSku == item.id">默认</van-tag>
        <van-tag plain type="danger">预警值{{item.lowStock}}</van-tag>
        <van-tag plain type="danger">销量{{item.sale}}</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" type="danger" @click="handldeseleteChange(item)">删除</van-button>
        <van-button size="mini" type="info" @click="handleSelectionChange(item)">修改</van-button>
        <van-button
          size="mini"
          type="info"
          @click="handleDefualSku(item)"
          v-if="product.defualSku != item.id"
        >设为默认</van-button>
      </template>
    </van-card>
      <van-goods-action>
        <van-button block type="primary" @click="handleaddsku">新增</van-button>
      </van-goods-action>
    </div>

    <van-popup v-model="showeditPicker" position="bottom" closeable>
      <div style="margin: 40px 15px">
        <van-field
          readonly
          clickable
          name="商品规格"
          :value="eidtdata.sp"
          label="商品规格"
          placeholder="点击选择商品规格"
          @click="showspPicker = true"
        />

        <van-field
          v-model="eidtdata.price"
          label="销售价格"
          placeholder="销售价格"
          :rules="[{ required: true, message: '请输入销售价格' }]"
        ></van-field>

        <van-field
          v-model="eidtdata.originalPrice"
          label="市场价格"
          placeholder="市场价格"
          :rules="[{ required: false, message: '请输入市场价格' }]"
        ></van-field>

        <van-field
          v-model="eidtdata.stock"
          label="商品库存"
          placeholder="商品库存"
          :rules="[{ required: true, message: '请输入商品库存' }]"
        ></van-field>

        <van-field
          v-model="eidtdata.lowStock"
          label="库存预警值"
          placeholder="库存预警值"
          :rules="[{ required: true, message: '请输入库存预警值' }]"
        ></van-field>

        <van-field
          v-model="eidtdata.skuCode"
          label="SKU编号"
          placeholder="SKU编号"
          :rules="[{ required: true, message: '请输入SKU编号' }]"
        ></van-field>

        <el-form :model="eidtdata" ref="eidtdatafrom" size="small">
          <el-form-item label="属性图片：">
            <el-card shadow="never" class="cardBg">
              <single-upload
                v-model="eidtdata.pic"
                style="width: 300px;display: inline-block;margin-left: 10px"
              ></single-upload>
            </el-card>
          </el-form-item>
          <el-button type="primary" style="float:right" @click="handlecreatesku">确认</el-button>
          <el-button type="primary" style="float:right" @click="handlecanclesku">取消</el-button>
        </el-form>
      </div>
    </van-popup>

    <!-- 规格选择 -->
    <van-popup v-model="showspPicker" position="bottom" closeable>
      <productAttr v-model="product" @change="productAttrChange" style="margin: 40px 15px"></productAttr>
    </van-popup>
  </div>
</template>
<script>
import multiUpload from "@/components/Upload/multiUpload";
import SingleUpload from "@/components/Upload/singleUpload";
import productAttr from "./productAttr";


import {
  updateProduct,
  productinfo,
  attributeList,
  createSku,
  updateSku,
  deleteSku
} from "@/api/product";
export default {
  name: "projectInfo",
  components: {
    multiUpload,
    SingleUpload,
    productAttr,
  },
  props: {
    value: {
      type: Object,
      default: null
    }
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        this.product = newValue
        if(!this.product.skuList){
          this.product.skuList  = []
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      product: {},
      attrList: [],
      eidtdata: {},
      listLoading: false,
      showspPicker: false,
      showeditPicker: false
    };
  },
  methods: {
    productAttrChange(sp) {
      this.eidtdata.sp = sp;
      this.$forceUpdate();
    },
    
    handleaddsku() {
      this.eidtdata = {};
      this.showeditPicker = true;
    },
    handlecreatesku() {
      this.eidtdata.productId = this.product.id;
      this.listLoading = true;
      if (this.eidtdata.id) {
        updateSku(this.eidtdata.id, this.eidtdata).then(response => {
          this.listLoading = false;
          this.eidtdata = {};
          this.showeditPicker = false;
          this.$emit("commit", this.product);
        });
      } else {
        createSku(this.eidtdata).then(response => {
          this.listLoading = false;
          this.eidtdata = {};
          this.showeditPicker = false;
          this.$emit("commit", this.product);
        });
      }
    },
    handleSelectionChange(row) {
      var copystr = JSON.stringify(row);
      this.eidtdata = JSON.parse(copystr);
      this.showeditPicker = true;
    },
    handlecanclesku() {
      this.eidtdata = {};
      this.showeditPicker = false;
    },
    handleDefualSku(row) {
  
      this.listLoading = true;
      this.product.defualSku = row.id;
      this.$emit("commit", this.product);
    },
    handldeseleteChange(row) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认删除此sku信息?"
        })
        .then(() => {
          this.listLoading = true;
          deleteSku(row.id).then(response => {
            this.listLoading = false;
            this.$emit("commit", this.product);
          });
        })
        .catch(() => {});
    }
  },
  computed: {
    getAttrList(cid) {
      let param = { pageNum: 1, pageSize: 102, type: 0 };
      attributeList(product.id).then(response => {
        this.attrList = response.data;
      });
    }
  }
};
</script>